<template>
    <div style="margin: 10px;padding: 10px; width: 100%;background-color: #FFF;border-radius: 10px;overflow-y: auto;" class="container">
        <el-row>
            <el-col :span="4">
              <div class="container">
                <el-form v-model="formdata">
                <el-form-item label="批次号" style="font-size: 10px !important;">
                  <el-input v-model="formdata.batchCode" placeholder="输入批次号"></el-input>
                </el-form-item>
                <el-form-item label="批次时间">
                  <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="formdata.batchTime" style="width: 100% !important;"></el-date-picker>
                  </el-col>
                </el-form-item>
                <el-button @click="searchBatch">搜索</el-button>
                <el-button @click="cleanBatch">清空</el-button>
              </el-form>
              </div>

              <el-tabs :tab-position="tabPosition" @tab-click="handleClick">
                <el-tab-pane v-if="batchdata.length>0" v-for="(item,index) in this.batchdata" :label="item.batchCode" :batchcode="item.batchCode" :index="index"> 
                </el-tab-pane>
                <el-tab-pane v-else-if="batchdata.length==0" label="无批次">无批次</el-tab-pane>
                <el-link type="primary" class="onecn" @click="upPage">上一页</el-link>
                <el-link type="primary" class="onecn" @click="nextPage">下一页</el-link>
                <el-form>
                   <el-select v-model="page2.pageSize" placeholder="分页" @change="selectChange">
                     <el-option :value="10">10</el-option>
                     <el-option :value="20">20</el-option>
                     <el-option :value="40">40</el-option>
                     <el-option :value="80">80</el-option>
                   </el-select>
                </el-form>
                <el-link type="primary"  @click="homepage" style="margin-right: 10px;">首页</el-link>
                <el-link type="primary" @click="lastpage">尾页</el-link>
              </el-tabs>
              
            </el-col>

            <el-col :span="19">
              <div class="box-body">

                <h2 v-if="batchdata.length>0">{{ batchdata[index].batchCode }}</h2>
                <h2 v-else>没有批次记录</h2>
                <div class="cardBox" style="border: 1px solid #ccc;width: 50%;padding: 10px;" v-if="batchdata.length>0">
                   <el-row class="carBox-one">
                       <el-col :span="11">
                          <h4>批次负责人：{{batchdata[index].userName}}</h4>
                       </el-col>
                       <el-col :span="11">
                          <h4>批次时间：{{batchdata[index].batchTime}}</h4>
                       </el-col>
                   </el-row>
                   <el-row class="carBox-two">
                       <el-col :span="11">
                          <h4>批次总数：{{batchdata[index].batchNum}} (件)</h4>
                       </el-col>
                       <el-col :span="11">
                          <h4>批次费用：{{batchdata[index].batchPrice}} (元)</h4>
                       </el-col>
                   </el-row>
                   <el-row class="carBox-three">
                       <el-col :span="11">
                          <h4>批次重量：{{ batchdata[index].batchWeight}} (kg)</h4>
                       </el-col>
                       <el-col :span="11">
                          <h4>批次车费：{{batchdata[index].batchFare}} (元)</h4>
                       </el-col>
                   </el-row>
                   <el-row class="carBox-three">
                       <el-col :span="11">
                          <h4>批次地点：{{ batchdata[index].batchPlace }}</h4>
                       </el-col>
                       <el-col :span="11">
                          <h4>备注：{{ batchdata[index].remark }}</h4>
                       </el-col>
                   </el-row>
                   <h4>状态：
                    <span v-if="batchdata[index].status==0" style="color: red;">未上架</span>
                    <span v-else-if="batchdata[index].status==1" style="color: blue;">已上架</span>
                    <span v-else-if="batchdata[index].status==2" style="color: green;">售罄</span>
                  </h4>
                </div>
                  <h3 style="color: #409EFF;">批次详情</h3>
              <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               ref="crud"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               :page="page"
               :upload-after="uploadAfter"
              :upload-delete="uploadDelete"
               @on-load="onload">
               <template slot="status" slot-scope="scope">
                <el-tag v-if="scope.row.status==0" type="danger">未上架</el-tag>
                <el-tag v-else-if="scope.row.status==1" type="green">已上架</el-tag>
                <el-tag v-else-if="scope.row.status==2" type="success">售罄</el-tag>
               </template>
              </avue-crud>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getBatch} from "@/api/system/batch";
import {getBatchDetailList} from "@/api/system/batchdetail";
import {setStore, getStore} from '@/util/store';

export default{
    data(){
        return{
            tabPosition: 'left',
            userId:parseInt(getStore({name: 'userInfo'}).userId),
            roleId:parseInt(getStore({name: 'userInfo'}).roleId),
            batchdata:[],
            formdata:{
              userId:parseInt(getStore({name: 'userInfo'}).userId),
              roleId:parseInt(getStore({name: 'userInfo'}).roleId)
            },
            index:0,
            data:[],
            loading:false,
            page: {
              pageSize: 10,
              currentPage: 1,
              total: 1
            },
            page2: {
              pageSize: 20,
              currentPage: 1,
              total: 1
            },
            option:{
              menu:false,
              addBtn:false,
              searchMenuSpan: 6,
              border: true,
              showSummary:true,
              sumColumnList:[
            {
              label:"总计:",
              name:"baggedNum",
              type:"sum"
            },
            {
              label:"总计:",
              name:"cartonNum",
              type:"sum"
            }
          ],
          column:[
            {
              label:"图片",
              prop:"imgUrl",
              type:"upload",
              listType:"picture-card",
              span:24,
              propsHttp:{
                res: "data",
                url:"imgUrl"
              },
              canvasOption: {
              text: '兄弟',
              ratio: 0.1
              },
              action:"http://localhost:1888/api/blade-system/classfl/uploadImg2"     
            },
            {
                label:"蔬菜类名",
                prop:"vegetables",
                search:true
            },
            {
                label:"袋装价格",
                prop:"baggedPrice",
                dataType: "number",
                addDisplay:false
            },
            {
                label:"袋装净重量(kg)",
                prop:"baggedWeight",
                dataType: "number",
                addDisplay:false
            },
            {
                label:"袋装数量",
                prop:"baggedNum",
                dataType: "number",
                addDisplay:false
            },
            {
                label:"箱装价格",
                prop:"cartonPrice",
                dataType: "number",
                addDisplay:false
            },
            {
                label:"箱装净重量(kg)",
                prop:"cartonWeight",
                dataType: "number",
                addDisplay:false
            },
            {
                label:"箱装价格",
                prop:"cartonPrice",
                dataType: "number",
                addDisplay:false
            },
            {
                label:"箱装数量",
                prop:"cartonNum",
                dataType: "number",
                addDisplay:false
            },
            {
                label:"状态",
                prop:"status",
                slot:true,
                dicData:[
                  {
                   label:"未开卖",
                   value:0
                  },
                  {
                    label:"已开卖",
                    value:1
                  },
                  {
                    label:"售罄",
                    value:2
                  }
                ]
            }
          ]
            }
        }
    },
    created(){
      this.getBatchs();
    },
    methods:{
      homepage(){
        this.page2.currentPage = 1;
        this.getBatchs();
      },
      lastpage(){
        this.page2.currentPage = Math.ceil(this.page2.total/this.page2.pageSize);
        this.getBatchs();
      },
      selectChange(value){
        this.currentPage=1;
        this.getBatchs();
      },
      nextPage(){
        //下一页
        console.log(this.page2);
        if(this.page2.currentPage*this.page2.pageSize<this.page2.total){
          this.page2.currentPage += 1; 
          this.getBatchs();
        }else{
          this.$message.success("已是最后一页");
        }
      },
      upPage(){
        //上一页 
        if(this.page2.currentPage>1){
          this.page2.currentPage -= 1;
          this.getBatchs(); 
        }else{
          this.$message.success("已是第一页");
        }
        console.log(this.page2); 
      },
      getBatchs(){
        getBatch(this.page2.currentPage,this.page2.pageSize,Object.assign(this.formdata, this.query)).then(res=>{
            if(res.data.code==200){
                console.log(res);
                this.batchdata = res.data.data.listdt;   
                this.page2.total = res.data.data.count;
                if(res.data.data.count==0){
                  this.data = [];
                }else{
                  this.onload(this.page,{},this.batchdata[0].batchCode);
                }
            }else{
                this.$message.error("系统繁忙,刷新尝试");
            }
            console.log(this.batchdata);
        })
      },
      searchChange(params, done){
        console.log(params);
          this.page.currentPage = 1;
          this.onload(this.page,params);
          done();
        },
        searchReset() {
          this.parentId = 0;
          this.onload(this.page,{});
        },
        currentChange(currentPage){
          this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
          this.page.pageSize = pageSize;
        },
      onload(page,params={},batchCode=null){
          params["userId"]=this.userId;
          params["roleId"]=this.roleId;
          params["isdetail"]=true;
          params["current"]=page.currentPage;
          params["size"]=page.pageSize;
          params["batchCode"]=batchCode;
        getBatchDetailList(params).then(res=>{
            console.log(res);
            if(res.data.code==200){
                this.data = res.data.data.data,
                this.page.total = res.data.data.count   
            }else{
                this.$message.error("系统繁忙,刷新尝试");
            }
        })
      },
      handleClick(item){
        //根据批次号查询批次详情信息
        var obj={
          "batchCode":item.$attrs.batchcode
        };
        this.index = item.$attrs.index;
        this.onload(this.page,{},item.$attrs.batchcode);
        //this.onload(this.page,obj);
        // console.log(this.batchdata[this.index]);
        // getBatchDetailList(obj).then(res=>{
        //   console.log(res);
        //   this.data = res.data.data.data;
        //   this.page.total = res.data.data.count;
        // })
      },
      searchBatch(){
        //this.loading=true;
        this.page2.currentPage=1;
        this.getBatchs();
        // getBatch(this.page2.currentPage,this.page2.pageSize,Object.assign(this.formdata, this.query)).then(res=>{
        //   this.loading=false;
        //    if(res.data.code==200){
        //     console.log(res);
        //      this.batchdata = res.data.data.listdt;
        //      this.page2.total = res.data.data.count;
        //    }else{
        //       this.$message.error(res.data.msg);
        //    }
        // })
      },
      cleanBatch(){
        //this.loading=true;
        this.page2.currentPage=1;
        this.formdata={
          userId:parseInt(getStore({name: 'userInfo'}).userId),
          roleId:parseInt(getStore({name: 'userInfo'}).roleId)
        };
        this.getBatchs();
        // getBatch(this.page2.currentPage,this.page2.pageSize,Object.assign(this.formdata, this.query)).then(res=>{
        //    this.loading=false;
        //    if(res.data.code==200){
        //      this.batchdata = res.data.data.listdt;
        //      this.page2.total = res.data.data.count;
        //    }else{
        //       this.$message.error(res.data.msg);
        //    }
        // })
      }
    }
}

</script>

<style>
  .el-tabs__nav-scroll .el-tabs__nav.is-left{
    height:100vh !important;
    overflow-y:auto !important;
    overflow-x:hidden;
  }
  .shopcarmx{
    width: 60% !important;
    height: 30vh !important;
    overflow: hidden;
    overflow-y: auto;
}
.container .el-form-item__label{
  font-size: 12px !important;
}
.container .el-input{
  width: 50% !important;
}
.box-body .el-input{
  width: 100% !important;
}
.onecn{
  display: inline-block;
  width: 20px;  
  margin: 0 auto;  
  line-height: 24px;  
}
</style>